import * as echarts from "echarts";
// 企业账号数
export const getAccountCharts = (
  dom: HTMLElement,
  theme?: string | object | undefined,
  opts?: {}
) => {
  const myCharts = echarts.init(dom);
  myCharts.setOption({
    title: {
      text: "世界人口总量",
      subtext: "数据来自网络",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      data: ["2011年", "2012年"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
      boundaryGap: [0, 0.01],
    },
    yAxis: {
      type: "category",
      data: ["巴西", "印尼", "美国", "印度", "中国", "世界人口(万)"],
    },
    series: [
      {
        name: "2011年",
        type: "bar",
        data: [18203, 23489, 29034, 104970, 131744, 630230],
      },
      {
        name: "2012年",
        type: "bar",
        data: [19325, 23438, 31000, 121594, 134141, 681807],
      },
    ],
  });
};

// 期间质检文件类型
export const getFileTypeCharts = (
  dom: HTMLElement,
  theme?: string | object | undefined,
  opts?: {}
) => {
  const myCharts = echarts.init(dom);
  myCharts.setOption({
    tooltip: {
      trigger: "item",
    },
    // legend: {
    //   top: "5%",
    //   left: "center",
    // },
    series: [
      {
        name: "访问来源",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: "16",
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 1048, name: "搜索引擎" },
          { value: 735, name: "直接访问" },
          { value: 580, name: "邮件营销" },
          { value: 484, name: "联盟广告" },
          { value: 300, name: "视频广告" },
        ],
      },
    ],
  });
};

// 期间质检文件数
export const getFileNumCharts = (
  dom: HTMLElement,
  theme?: string | object | undefined,
  opts?: {}
) => {
  const myCharts = echarts.init(dom);
  myCharts.setOption({
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // Use axis to trigger tooltip
        type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
      },
    },
    legend: {
      data: ["Direct", "Mail Ad", "Affiliate Ad", "Video Ad", "Search Engine"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    yAxis: {
      type: "value",
    },
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    series: [
      {
        name: "Video Ad",
        type: "bar",
        stack: "total",
        label: {
          show: true,
        },
        emphasis: {
          focus: "series",
        },
        data: [150, 212, 201, 154, 190, 330, 410],
      },
      {
        name: "Search Engine",
        type: "bar",
        stack: "total",
        label: {
          show: true,
        },
        emphasis: {
          focus: "series",
        },
        data: [
          {
            value: 820,
            itemStyle: {
              color: "#19dce2",
            },
          },
          {
            value: 832,
            itemStyle: {
              color: "#19dce2",
            },
          },
          {
            value: 901,
            itemStyle: {
              color: "#19dce2",
            },
          },
          {
            value: 934,
            itemStyle: {
              color: "#19dce2",
            },
          },
          {
            value: 1290,
            itemStyle: {
              color: "#19dce2",
            },
          },
          {
            value: 1330,
            itemStyle: {
              color: "#19dce2",
            },
          },
          {
            value: 1320,
            itemStyle: {
              color: "#19dce2",
            },
          },
        ],
      },
    ],
  });
};

// 质检规则数
export const getRuleNum = (
  dom: HTMLElement,
  theme?: string | object | undefined,
  opts?: {}
) => {
  const myCharts = echarts.init(dom);
  myCharts.setOption({
    title: {
      text: "世界人口总量",
      subtext: "数据来自网络",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      data: ["2011年", "2012年"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    yAxis: {
      type: "value",
      boundaryGap: [0, 0.01],
    },
    xAxis: {
      type: "category",
      data: ["巴西", "印尼", "美国", "印度", "中国", "世界人口(万)"],
    },
    series: [
      {
        name: "2011年",
        type: "bar",
        data: [18203, 23489, 29034, 104970, 131744, 630230],
      },
      {
        name: "2012年",
        type: "bar",
        data: [19325, 23438, 31000, 121594, 134141, 681807],
      },
    ],
  });
};
